<template>
  <div class="table" :class="{ stripe: stripe ? 'stripe' : '' }">
    <el-table
      @row-click="handleRowClick"
      v-loading="isLoading"
      :header-cell-style="headerStyle"
      :cell-style="cellStyle"
      :data="tableData"
      border
      style="width: 100%"
      :height="height"
      class="f12"
      :stripe="stripe"
      :show-summary="summary"
      :summary-method="getSummaries"
      @selection-change="selectList"
      @sort-change="sortChange"
      highlight-current-row
    >
      <el-table-column :selectable="selectable" align="center" type="selection" width="40" v-if="selection" />
      <template v-for="(item, index) in upCaseFormList" :key="index">
        <!-- 多级表头 -->
        <el-table-column :fixed="item.fixed" :label="(item as any).label" v-if="item.Multistage" align="center" show-overflow-tooltip>
          <el-table-column
            align="center"
            :prop="columns.prop"
            :label="columns.label"
            v-for="columns in item.children"
            :width="(columns as any).width"
          >
            <template #default="scope">
              <!-- select列 -->
              <el-select v-if="columns.type === 'select'" v-model="scope.row[columns.prop].selectValue" placeholder="" size="small">
                <el-option v-for="option in scope.row[columns.prop].options" :key="option.key" :label="option.label" :value="option.value" />
              </el-select>
              <el-checkbox
                v-if="columns.type === 'checkbox'"
                v-model="scope.row[columns.prop]"
                :disabled="!scope.row.change || columns.disable"
                @change="$emit('checkboxChange', item.prop, scope.row)"
              />
              <el-tooltip
                v-if="columns.type === 'tooltip'"
                class="box-item"
                effect="dark"
                :content="scope.row[columns.prop].tooltipVal"
                placement="top"
              >
                <span>{{ scope.row[columns.prop].value }}</span>
              </el-tooltip>
              <!-- 带背景颜色的列 -->
              <span
                v-if="columns.bgColor"
                :style="{ backgroundColor: columns.bgColor ? scope.row[columns.prop].bgColor : 'white' }"
                style="width: 100%"
              >
                {{ scope.row[columns.prop].value }}
              </span>
              <!-- 带图片的列 -->
              <div class="imgDiv" v-if="columns.type === 'img'">
                <el-image
                  hide-on-click-modal
                  preview-teleported
                  style="height: 26px"
                  :src="scope.row[columns.prop]"
                  :zoom-rate="1.2"
                  @click="imgClicked(scope.row[columns.prop], columns.srcList)"
                  :preview-src-list="columns.srcList"
                  :initial-index="imgIndex"
                  fit="cover"
                />
              </div>
              <!-- 普通列 -->
              <div
                v-if="
                  !columns.type &&
                  !columns.bgColor &&
                  !columns.cfmFlag &&
                  !columns.change &&
                  !columns.backgroundColor &&
                  !columns.backgroundColor2 &&
                  !columns.backgroundColor3
                "
              >
                <el-input
                  v-if="scope.row.change"
                  v-model="scope.row[columns.prop]"
                  placeholder=""
                  size="small"
                  clearable
                  @change="inputBlur(scope.row, item.label, 'input')"
                  :disabled="scope.row.disable && columns.disable"
                  @focus="$emit('currentRow', scope.row)"
                ></el-input>
                <span
                  v-else-if="columns.change && !columns.backgroundColor && !columns.backgroundColor2 && !columns.backgroundColor3"
                  @dblclick="$emit('currentRow1', scope.row)"
                  @click="$emit('currentRow', scope.row)"
                  :style="{ backgroundColor: scope.row.change ? columns.change : 'white' }"
                >
                  {{ scope.row[columns.prop] }}
                </span>
                <span v-else @dblclick="$emit('currentRow1', scope.row)" @click="$emit('currentRow', scope.row)">
                  {{ scope.row[columns.prop] }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 单表头 -->

        <el-table-column
          v-if="item.type !== 'select' && item.backgroundColor2 !== true"
          align="center"
          :prop="(item as any).prop"
          :label="$t((item as any).label)"
          :width="(item as any).width"
          :show-overflow-tooltip="showToolTip"
          class="f12"
          :sortable="item.sortable"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span style="width: 100%" @click="$emit('currentRow', scope.row)">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="item.type === 'select'"
          align="center"
          :prop="(item as any).prop"
          :label="(item as any).label"
          :width="(item as any).width"
          :show-overflow-tooltip="showToolTip"
          class="f12"
          :sortable="item.sortable"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span style="width: 100%" :style="{ backgroundColor: scope.row[item.prop].backgroundColor2 }" @click="$emit('currentRow', scope.row)">{{
              scope.row[item.prop]?.selectValue
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="item.backgroundColor2"
          align="center"
          :prop="(item as any).prop"
          :label="(item as any).label"
          :width="(item as any).width"
          :show-overflow-tooltip="showToolTip"
          class="f12"
          :sortable="item.sortable"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span style="width: 100%" :style="{ backgroundColor: scope.row.backgroundColor2 }" @click="$emit('currentRow', scope.row)">{{
              scope.row[item.prop]
            }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column fixed="right" label="功能列" align="center" width="300px">
        <template #default="scope">
          <el-button v-if="functionList" :disabled="!updated" type="primary" size="small" @click="modifTable(scope.row)"> 修改 </el-button>
          <el-button size="small" type="danger" @click="deleteRow(scope)" :disabled="!deleteButton" v-if="functionList"> 删除 </el-button>

          <el-button style="background-color: #23c6c8" v-if="functionList1" type="primary" size="small" @click="modifTable3(scope.row)">
            收发明细
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="modifTable5(scope)"
            v-if="scope.row.inShort === 0 ? false : true && functionList2"
            style="background-color: #1c84c6"
          >
            收料
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="modifTable6(scope)"
            v-if="scope.row.outButton === 0 ? false : true && functionList2"
            style="background-color: #e98b2a"
          >
            发料
          </el-button>

          <el-button size="small" type="danger" @click="deleteRow(scope)" v-if="functionList3" style="background-color: #e98b2a"> 导出 </el-button>

          <el-button
            style="background-color: #23c6c8"
            v-if="functionList5 && scope.row.processFlag === 'Y' ? true : false"
            type="primary"
            size="small"
            @click="modifTable7(scope.row)"
          >
            生成轮次标签
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="modifTable8(scope)"
            v-if="functionList5 && scope.row.processFlag === 'Y' && scope.row.labelFlag === 'Y'"
            style="background-color: red"
          >
            删除轮次标签
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="modifTable9(scope)"
            v-if="functionList5 && scope.row.processFlag === 'Y' && scope.row.labelFlag === 'Y'"
            style="background-color: blue"
          >
            打印标签
          </el-button>

          <el-button size="small" type="danger" @click="modifTable3(scope)" v-if="functionList6" style="background-color: #e98b2a">
            明细查询
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="modifTable5(scope)"
            v-if="functionList6 && scope.row.outQty1 !== 0"
            style="background-color: #23c6c8"
          >
            出库作业 </el-button
          ><el-button
            size="small"
            type="danger"
            @click="modifTable6(scope)"
            v-if="functionList6 && scope.row.inQty1 !== 0"
            style="background-color: #1c84c6"
          >
            缴库作业
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="dialogVisible1" width="50%" class="dialog pb0">
    <el-form ref="ruleFormRef" :model="RowArrayList" label-width="auto" class="demo-ruleForm" status-icon style="max-width: 600px">
      <template v-for="(item, index) in tableHeader" :key="index">
        <el-form-item v-if="item.type === 'input'" :label="item.label" prop="name">
          <el-input :disabled="item.change1" v-model="RowArrayList[item.prop]" />
        </el-form-item>

        <el-form-item v-if="RowArrayList[item.prop] && RowArrayList[item.prop].options" :label="item.label">
          <el-select-v2 v-model="RowArrayList[item.prop].selectValue" :options="RowArrayList[item.prop]?.options" />
        </el-form-item>
      </template>
    </el-form>

    <div style="display: flex">
      <el-button type="primary" size="small" @click="modifTable1"> 保存 </el-button>
      <el-button size="small" type="info" @click=";(dialogVisible1 = false), (RowArrayList.value = [])"> 取消 </el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { cloneDeep, debounce } from 'lodash'
import { storeToRefs } from 'pinia'
import { defineComponent, ref, type PropType, computed, onMounted, nextTick, toRefs, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Table'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import service from '@/utils/request'
import zhCn from '@/i18n/zh-cn.json'
import en from '@/i18n/en.json'
import {
  ElMessage,
  ElMessageBox,
  ElTable,
  type UploadFile,
  type UploadFiles,
  type UploadProgressEvent,
  type UploadProps,
  type UploadRequestOptions
} from 'element-plus'
const token = computed(() => {
  const token = sessionStorage.getItem('Authorization')
  if (token) {
    return token
  } else {
    return 'LTF_token'
  }
})
// 计算属性改为大写
const upCaseFormList = computed(() => {
  // props.tableHeader?.forEach((item: any, index: number) => {
  //   if (typeof item.inputValue === 'number' || typeof item.selectValue === 'number' || item.type === 'select1') {
  //   } else if (item.inputValue) {
  //     item.inputValue = item.inputValue
  //   } else if (item.selectValue) {
  //     item.selectValue = item.selectValue
  //   }
  // })

  // console.log(props.tableHeader)

  // 多语言
  props.tableHeader?.forEach((item: any, index: number) => {
    for (const key in zhCn.Table) {
      // 输入框
      if ((zhCn.Table as any)[key] === item.label || (en.Table as any)[key] === item.label) {
        item.label = `Table.${key}`
      }
    }
  })

  return props.tableHeader as any
})
const dialogVisible1 = ref(false)

// 需要修改的数据
const RowArrayList = ref<any>()

// 保存
const modifTable1 = (row: any) => {
  emits('modifTable1', RowArrayList.value)
  dialogVisible1.value = false
}

// 修改
const modifTable = (row: any) => {
  RowArrayList.value = []
  dialogVisible1.value = true
  RowArrayList.value = cloneDeep(row)
}

// 收发明细
const modifTable3 = (row: any) => {
  emits('modifTable3', row)
}

const modifTable7 = (row: any) => {
  emits('modifTable7', row)
}

const modifTable5 = (row: any) => {
  emits('modifTable5', row)
}

const modifTable6 = (row: any) => {
  emits('modifTable6', row)
}

const modifTable8 = (row: any) => {
  emits('modifTable8', row)
}

const modifTable9 = (row: any) => {
  emits('modifTable9', row)
}

// 删除
const deleteRow = (row: any) => {
  emits('deleteRow', row)
}

// 点击变色
const handleRowClick = (row: any, column: any, event: any) => {
  // 获取当前点击的行
  const clickedRow = event.currentTarget

  // 获取当前点击行的父元素（表格行所在的父元素）
  const parentElement = clickedRow.parentElement

  // 获取同级的其他行
  const siblingRows = Array.from(parentElement.children).filter((row) => row !== clickedRow)

  // 遍历同级的其他行，并可以对它们进行操作
  siblingRows.forEach((row: any) => {
    // 在这里添加您想要对同级其他行进行的操作
    row.style.backgroundColor = 'initial'
    row.style.color = 'initial'
  })
}

// props传入模块
interface selectOptionsType {
  key: string
  label: string
  value: string
}
interface tableHeader {
  prop: string
  width?: string | undefined
  label: string
  sortable?: boolean
  type?: string
  selectOptions?: selectOptionsType[]
  fixed?: string
  bgColor?: string
  cfmFlag?: string
  img?: boolean
  srcList?: string[]
  Multistage?: boolean
  children?: tableHeader[]
  imgAction?: string
  change?: string
  backgroundColor?: string
  backgroundColor2?: string | boolean
  backgroundColor3?: string
  tooltipVal?: string
  disable?: boolean
  disableBC?: boolean
  PageModule?: boolean
  allowCreate?: boolean
  imgData?: any
  disabled?: boolean
  allChange?: boolean
  tableSelect?: any
  change1: boolean
  updated: boolean
  deleteButton: boolean
}

type TableHeaderType = tableHeader[]
const props = defineProps({
  TableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 100
  },
  outTableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 80
  },
  tableColumns: Array,
  tableData: Array,
  tableHeader: [Array] as PropType<TableHeaderType>,
  selection: Boolean,
  stripe: Boolean,
  deleteButton: Boolean,

  updated: Boolean,
  summary: Boolean,
  functionList: Boolean,
  functionList1: Boolean,
  functionList2: Boolean,
  functionList3: Boolean,
  functionList5: Boolean,
  functionList6: Boolean,

  summaryData: Array,
  isLoading: {
    required: true,
    type: Boolean,
    default: false
  },
  getTableList: {
    type: Function as any
  },
  clearSelection: {
    type: Function as any
  },
  showToolTip: {
    type: Boolean,
    default: true
  }
})

// 适配模块
const height = ref()
function setFit() {
  // console.log(document.getElementsByClassName("app-main")[0].clientHeight, document.getElementsByClassName("find")[0].clientHeight);
  // card里面除了表格的高度

  // 表格实际占的高 = 屏幕高度 - card之外的高 - card的padding（20px,上下各10px） - card里面除了表格的高度
  let contentHeight = innerHeight - (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10) - 20 - props.outTableHeight
  if (document.getElementsByClassName('find').length === 2) {
    contentHeight =
      innerHeight -
      (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10 + document.getElementsByClassName('find')[1]?.clientHeight) -
      20 -
      props.outTableHeight
  }

  height.value = (contentHeight * props.TableHeight) / 100
  // //  主体的高度
  // const mainContainerHeight = data.height;
  // // 导航的高度
  // const navHeight = data.x;
  // //  内容高度
  // const contentHeight = mainContainerHeight - navHeight;
  // // vh,px 30 === 30%
  // // 30  tableHeight
  // const tableHeight = 30;
  // const itemHeight = (contentHeight * tableHeight) / 100;
}
onMounted(() => {
  setFit()
})

let clientWidth = ref(document.body.clientWidth)
window.onresize = () => {
  return setFit()
}

// 修改表格标题样式
const headerStyle = ({ row, column, rowIndex, columnIndex }: any) => {
  return { color: '#191919', padding: '0', height: '26px', 'border-right': 'none' }
}

// 修改表格体样式
const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number }) => {
  return { color: '#191919', 'border-bottom': '0.5px solid var(--J-table-border-color)', padding: '0', height: '26px', width: '200px' }
}

// 表格总计函数
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: string[] = []
  props.summaryData?.forEach((item: any) => {
    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[index] = '总计'
      }
      if (index === item.index) {
        sums[index] = item.num
      }
    })
  })
  return sums
}
const imgIndex = ref(0)
// 点击图片
const imgClicked = (src: any, srcList: any) => {
  let index = srcList.findIndex((item: any) => item === src)
  imgIndex.value = index
}

// 传出模块
const emits = defineEmits([
  'currentRow',
  'selectList',
  'sortChange',
  'cancelChange',
  'confirmChange',
  'currentRow1',
  'focusInput',
  'clearSelection',
  'checkboxChange',
  'selectListShow',
  'selectListUnShow',
  'filterMethod',
  'selectValChange',
  'uploadImg',
  'successUpload',
  'inputChange',
  'download',
  'filterMethodSlot',
  'deleteRow',
  'modifTable1',
  'modifTable3',
  'modifTable5',
  'modifTable6',
  'modifTable7',
  'modifTable8',
  'modifTable9'
])
const selectList = (a: any) => {
  emits('selectList', a)
}

// 排序触发函数
const sortChange = (a: any) => {
  const { column, prop, order } = a
  emits('sortChange', order, prop, column)
}

// 修改单元格后失去焦点
const inputBlur = (row: any, currentLabel: any, type: string) => {
  // 不触发ElMessageBox
  if (row.disableConfirm) {
    // 表格下拉框修改后触发
    if (type === 'select') {
      emits('selectValChange', row, currentLabel)
    } else if (type === 'input' || type === 'backgroundColor') {
      emits('inputChange', row, currentLabel)
    }
    return
  } else {
    ElMessageBox.confirm('是否修改？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emits(
          'confirmChange',
          row,
          (i: any) => {
            props.getTableList()
            document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
          },
          currentLabel
        )
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消修改'
        })
        props.getTableList()
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
  }
}

// 上传图片模块
const imageUrl = ref('')

const handleAvatarSuccess = (response: any, uploadFile: any, uploadFiles: any, row: any) => {
  emits('successUpload', response.data, row)
  JMessage.success(response.message)
  props.getTableList()
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg') {
    JMessage.error('必须上传JPG格式图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    JMessage.error('图片最大2MB')
    return false
  }
  return true
}

const uploadProgress = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

// 多选框是否可以勾选
const selectable = (row: any, index: any) => {
  if (row.change === null) {
    return false
  } else {
    return true
  }
}

// // 筛选下拉框取消全部选择
// onMounted(() => {
//   emits('clearSelection', () => {
//     multipleTableRef.value!.clearSelection()
//   })
// })
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// 筛选下拉框中的数据
const selectLoading = ref(false)
const filterMethod = debounce((val: any, row: any, selectOptions: any, PageModule: boolean, item: any) => {
  // 如果下拉框有分页器，就给后端做
  if (PageModule) {
    emits('filterMethod', val, row, item)
  } else if (item.slot) {
    emits('filterMethodSlot', val, row, item)
  } else {
    if (!selectOptions) return
    selectOptions.splice(0) // 删除selectOptions
    copyOptions.value
      .filter((item: any) => item.value.indexOf(val) !== -1)
      .forEach((item: any) => {
        selectOptions.push(item)
      })
  }
})

let copyOptions = ref([])
const clickSelect = (row: any, selectOptions: any) => {
  if (selectOptions) {
    copyOptions.value = JSON.parse(JSON.stringify(selectOptions))
  }
  emits('currentRow', row)
}
const copyFn = (selectOptions: any) => {
  copyOptions.value = JSON.parse(JSON.stringify(selectOptions))
}

// 下拉框显示与隐藏触发函数
const selectVisibleChange = (visible: boolean, row: any, item: any) => {
  emits('selectListShow', row, visible, item, copyFn)
}

// 多级表头
// {
//   Multistage: true,
//   label: '大底',
//   children: [
//     {
//       label: '欠数',
//       prop: 'customer',
//     }, {
//       label: '计划',
//       prop: 'customer',
//     }, {
//       label: '实际',
//       prop: 'customer',
//     },
//   ]
// },

// 表格带下拉框的列
// const tableHeader = ref([
//   {
//     label: '客户',
//     prop: 'customer',
//     width: '69px',
//   },
//   {
//     type: 'select',
//     label: '蹇泽阳',
//     prop: 'name',
//     width: '150px',
//   }
// ])
// const tableData = ref([
//   {
//     customer: '2023-5-5002',
//     name: {
//       selectValue: 'option1',
//       options: [{
//         key: '1',
//         label: 'option1',
//         value: '111111'
//       },
//       {
//         key: '2',
//         label: 'option2',
//         value: '22222222222'
//       }]
//     },
//   },
//   {
//     customer: '2023-5-5002',
//     name: {
//       selectValue: 'option2',
//       options: [{
//         key: '1',
//         label: 'option2',
//         value: '222222'
//       }]
//     },
//   },
// ])

// 表格带复选框的列
// const tableHeader = ref([
//   {
//     label: '客户',
//     prop: 'customer',
//     width: '69px',
//   },
//   {
//     label: '单选列',
//     type: 'checkbox',
//     prop: 'checkboxArrange',
//     width: '69px',
//   }
// ])
// const tableData = ref([
//   {
//     customer: 'jzy',
//     checkboxArrange: true,
//   },
//   {
//     customer: 'jzyNB',
//     checkboxArrange: false,
//   }
// ])

// 带tooltip的列
// const tableHeader2 = ref([
//   {
//     type: 'tooltip',
//     label: '左',
//     prop: 'left',
//     width: '73'
//   },
//   {
//     type: 'tooltip',
//     label: '右',
//     prop: 'right',
//     width: '73'
//   }
// ])
// const tableData2 = ref([
//   {
//     instruction: '指令1',
//     itemNumber: '货号1',
//     instructionNumber: '指令数1',
//     position: '部位1',
//     segment: '段1',
//     preSupplementaryNumber: '预补双数1',
//     left: {
//       value: '1',
//       tooltipVal: `客人号 40  大底号 40`
//     },
//     right: {
//       value: '2',
//       tooltipVal: '客人号 42  大底号 42'
//     }
//   },
//   {
//     instruction: '指令2',
//     itemNumber: '货号2',
//     instructionNumber: '指令数2',
//     position: '部位2',
//     segment: '段2',
//     preSupplementaryNumber: '预补双数2',
//     left: {
//       value: '3',
//       tooltipVal: '客人号 50  大底号 50'
//     },
//     right: {
//       value: '4',
//       tooltipVal: '客人号 50  大底号 50'
//     }
//   },
// ])
</script>

<style lang="less" scoped>
:deep(.el-table td.el-table__cell div) {
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

:deep(.el-input--small) {
  --el-input-height: 26px;
  text-align: center;
}

:deep(.is-hovering) {
  background-color: #fff5eb;
  border: none;
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  padding: 0;
  height: 100%;
  width: 100%;
  box-shadow: none;
  background-color: transparent;
}

:deep(.el-select__selected-item) {
  text-align: center;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

.\#FF8080 {
  :deep(.el-input__inner) {
    background-color: #ff8080 !important;
    height: 100%;
  }
}

.\#80E0E0 {
  :deep(.el-input__inner) {
    background-color: #80e0e0 !important;
    height: 100%;
  }
}

.\#FFE000 {
  :deep(.el-input__inner) {
    background-color: #ffe000 !important;
    height: 100%;
  }
}

.\#EAEFF5 {
  :deep(.el-input__inner) {
    background-color: #eaeff5 !important;
    height: 100%;
  }
}

.\#80c080 {
  :deep(.el-input__inner) {
    background-color: #80c080 !important;
    height: 100%;
  }
}

.\#ffc0ff {
  :deep(.el-input__inner) {
    background-color: #ffc0ff !important;
    height: 100%;
  }

  :deep(.el-input__wrapper) {
    background-color: #ffc0ff !important;
  }
}

// 合计样式
:deep(.el-table .el-table__cell) {
  padding: 0;
}

.table {
  // 取消左侧边框
  :deep(.el-table__border-left-patch) {
    width: 0;
  }

  .imgDiv {
    height: 26px;
    // .demo-image__error .image-slot {
    //   font-size: 30px;
    // }

    // .demo-image__error .image-slot .el-icon {
    //   font-size: 30px;
    // }

    // .demo-image__error .el-image {
    //   height: 26px;
    // }

    .img {
      width: 70px;
      height: 26px;
    }
  }

  // tooltip样式
  .tooltip-base-box {
    width: 600px;
  }

  .tooltip-base-box .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tooltip-base-box .center {
    justify-content: center;
  }

  .tooltip-base-box .box-item {
    width: 110px;
    margin-top: 10px;
  }

  //
  :deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: transparent;
    padding: 0;
  }

  // 表格最上面边框
  :deep(.el-table--border .el-table__inner-wrapper::after) {
    opacity: 0;
  }

  // 表格底部边框
  :deep(.el-table__inner-wrapper::before) {
    opacity: 0;
  }

  // 总计增加边框
  :deep(.el-table__footer-wrapper) {
    border-top: none;
    border-left: 1px solid var(--el-table-border-color);
    border-bottom: 1px solid var(--el-table-border-color);
  }

  :deep(.el-table--border::before) {
    position: relative;
  }

  // 表格最外边框
  :deep(.el-table--border.el-table--group) {
    border: none;
  }

  // 头部边框
  :deep(.customer-table thead tr th.is-leaf) {
    // border: 1px solid #EBEEF5;
    border-right: none;
  }

  // 取消左侧头部边框
  :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none;
  }

  // 表格最外层边框-底部边框
  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.customer-table::before) {
    width: 0;
  }
}

:deep(.el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.el-select__wrapper:hover) {
  background-color: #fff5eb;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select) {
  --el-select-border-color-hover: #fff;
}

// 走马灯样式
.stripe {
  :deep(.cell) {
    text-align: center;
  }

  :deep(.el-table__inner-wrapper) {
    color: #191919;
  }

  // 表头改变颜色
  :deep(.el-table th.el-table__cell) {
    background: #f6f6f6;
    color: #191919;
  }

  // 斑马条纹颜色
  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #f6f6f6;
  }

  /* 非斑马纹颜色 */
  :deep(.el-table tr) {
    background: #fff5eb;
  }
}

// :deep(.cell.el-tooltip:nth-child(1)){
//   // border-left: none;
//   border: 1px solid red;
// }

:deep(.el-table__body-wrapper .el-table__body .el-table__row > td) {
  border-left: 1px solid var(--J-table-border-color);
}
</style>

<!-- 上传图片样式 -->
<style>
.avatar {
  height: 26px;
}

.avatar-uploader {
  height: 26px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader .el-upload {
  height: 20px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.svg-container {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* vertical-align: middle; */
  /* display: inline-block; */
}

/* 用来设置当前页面element全局table 选中某行时的背景色*/

:deep(.el-input__prefix-inner) {
  display: none;
}
</style>
